<template>
  <section class="component add-interface-catalog-component">
    <Form ref="catalogForm" :model="catalogModel" :rules="catalogRules" :label-width="80">
      <FormItem prop="parentCatalog" label="上层目录">
        <Select v-model="catalogModel.parentCatalog" style="width:200px">
          <Option v-for="item in parentCatalogs" :value="item._id" :key="item._id">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <FormItem prop="catalogName" label="目录名称">
        <Input v-model="catalogModel.catalogName" placeholder="请输入目录名称"></Input>
      </FormItem>
      <FormItem class="text-center" :label-width="0">
        <Button type="primary" style="width:100px" @click="saveCatalog">确定</Button>
      </FormItem>
    </Form>
  </section>
</template>

<script>
  import { Interfaces } from '/imports/collections'
  export default {
    name: 'add-interface-catalog',
    meteor: {
      $subscribe: {
        'interfaces' () {
          return [this.$route.params.projectId]
        }
      },
      catalogs () {
        return Interfaces.find({
          projectId: this.$route.params.projectId,
          type: 0
        })
      }
    },
    props: {
      visible: Boolean,
      parentId: String
    },
    data () {
      return {
        isAdd: true,
        catalogs: [],
        catalogId: '',
        catalogModel: {
          parentCatalog: '',
          catalogName: ''
        },
        catalogRules: {
          parentCatalog: [
            { required: true, message: '请选择上层目录', trigger: 'blur' }
          ],
          catalogName: [
            { required: true, message: '请填写目录名称', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      parentCatalogs () {
        return [{
          name: '顶级目录',
          _id: 'root'
        },
          ...this.catalogs
        ]
      }
    },
    methods: {
      saveCatalog () {
        this.$refs.catalogForm.validate((valid) => {
          // 验证失败
          if (!valid) { return }
  
          if (this.isAdd) {
            this.addCatalog()
          } else {
            this.updateCatalog()
          }
        })
      },
      addCatalog () {
        Interfaces.insert({
          name: this.catalogModel.catalogName,
          type: 0,
          projectId: this.$route.params.projectId,
          parentId: this.catalogModel.parentCatalog === 'root' ? '' : this.catalogModel.parentCatalog,
          creator: this.$store.state.user.id
        }, this.saveCallback)
      },
      updateCatalog () {
        Interfaces.update(this.catalogId, {
          $set: {
            name: this.catalogModel.catalogName,
            parentId: this.catalogModel.parentCatalog === 'root' ? '' : this.catalogModel.parentCatalog
          }}
          , this.saveCallback)
      },
      saveCallback (error, result) {
        if (error) {
          console.log(error)
          return
        }

        this.$Message.success(this.isAdd ? '目录添加成功' : '目录更新成功')
        this.$emit('update:visible', false)
        this.reset()
      },
      /**
       * 加载目录信息
       */
      loadCatalog (id) {
        let catalog = Interfaces.findOne({
          _id: id
        })

        if (!catalog) { return }
        this.catalogModel.parentCatalog = catalog.parentId || 'root'
        this.catalogModel.catalogName = catalog.name
  
        this.catalogId = id
        this.isAdd = false
      },
      setParentId (id) {
        this.catalogModel.parentCatalog = id || 'root'
      },
      reset () {
        this.$nextTick(() => {
          this.$refs.catalogForm.resetFields()
          this.isAdd = true
        })
      }
    }
  }
</script>

<style scoped>


</style>
